import { ref, computed } from 'vue'

const PlacementEnum = {
  left: 'left',
  right: 'right',
}
export default {
  props: {
    visible: Boolean,
    setVisible: Function,
    width: Number,
    placement: {
      type: String,
      default: PlacementEnum.left,
    },
    title: String,
  },
  setup(props, ctx) {
    const arrowLeftClass = computed(() => {
      return props.visible ? 'arrow-right' : 'arrow-left'
    })
    const arrowRightClass = computed(() => {
      return props.visible ? 'arrow-left' : 'arrow-right'
    })
    const boxStyleObj = computed(() => {
      if (props.placement === PlacementEnum.left) {
        if (props.visible) {
          return {left: '0px'}
        } else {
          return {left: -props.width + 'px'}
        }
      } else {
        if (props.visible) {
          return {right: '0px'}
        } else {
          return {right: -props.width + 'px'}
        }
      }
    })
    const drawerHandleStyleObj = computed(() => {
      if (props.placement === PlacementEnum.left) {
        if (props.visible) {
          return {left: '-8px'}
        } else {
          return {left: '0px'}
        }
      } else {
        if (props.visible) {
          return {right: '-8px'}
        } else {
          return {right: '0px'}
        }
      }
    })
    const wrapperStyle = computed(() => {
      return {width: props.width + 'px', height: '100%'}
    })

    const toggleVisible = () => {
      if (props.visible) {
        // ctx.emit('update:visible', false)
        props.setVisible(false)
      } else {
        // ctx.emit('update:visible', true)
        props.setVisible(true)
      }
    };
    return {
      toggleVisible,
      arrowLeftClass,
      arrowRightClass,
      boxStyleObj,
      drawerHandleStyleObj,
      wrapperStyle,
    }
  },
  template: `
  <div class="arrow-drawer" :style="boxStyleObj">
    <div :class="arrowLeftClass" :style="drawerHandleStyleObj" @click="toggleVisible" v-if="placement === 'right'"></div>
    <div class="arrow-drawer-wrapper" :style="wrapperStyle">
      <div class="arrow-drawer-header" v-if="title">
        <div class="arrow-drawer-header-title">
          {{title}}
        </div>
      </div>
        
      <div class="arrow-drawer-body">
        <slot/>
      </div>
    </div>
    <div :class="arrowRightClass" :style="drawerHandleStyleObj" @click="toggleVisible" v-if="placement === 'left'"></div>
  </div>
  `
}
